<template>
  <a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="750px">
    <a-spin :spinning="loading">
      <a-form :form="form">
       
        <a-row :gutter="[24, 0]">
          <a-col :span="24">
            <a-form-item class="mb-15" label="选择分类" :label-col="labelCol" :wrapper-col="wrapperCol">
              <div style="display: flex;">
                <a-select class="flex-1" @change="changeSelect" placeholder="请选择"
                  v-decorator="['firstFoodCategoryCode', { rules: [{ required: true, message: '请选择' }] }]">
                  <a-select-option :value="item.categoryCode" v-for="(item,index) in menuList">{{item.categoryName}}</a-select-option>
                </a-select>
               <!-- <a-select class="flex-1" @change="changeSelect" placeholder="请选择"
                  v-decorator="['secondBehaviorCategoryCode', { rules: [{ required: true, message: '请选择' }] }]">
                  <a-select-option :value="1">你好 </a-select-option>
                  <a-select-option :value="2">不好 </a-select-option>
                </a-select> -->
              </div>
            </a-form-item>
          </a-col>
        </a-row>
<a-row :gutter="[24, 0]">
         <a-col :span="24">
           <a-form-item class="mb-15" label="食品名称" :label-col="labelCol" :wrapper-col="wrapperCol">
             <a-input
               placeholder="请输入"
               v-decorator="['foodName', { rules: [{ required: true, message: '请输入' }] }]"
               maxLength="300"
             ></a-input>
           </a-form-item>
         </a-col>
       </a-row>
        <a-row :gutter="[24, 0]">
          <a-col :span="24">
            <a-form-item class="mb-15" label="汪星人" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select class="flex-1" @change="changeSelect" placeholder="请选择"
                v-decorator="['dogStatus', { rules: [{ required: true, message: '请选择' }] }]">
               <a-select-option :value="0">可吃</a-select-option>
               <a-select-option :value="1">慎吃</a-select-option>
               <a-select-option :value="2">禁吃</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 0]">
          <a-col :span="24">
            <a-form-item class="mb-15" label="猫星人" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select class="flex-1" @change="changeSelect" placeholder="请选择"
                v-decorator="['catStatus', { rules: [{ required: true, message: '请选择' }] }]">
               <a-select-option :value="0">可吃</a-select-option>
               <a-select-option :value="1">慎吃</a-select-option>
               <a-select-option :value="2">禁吃</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 0]">
          <a-col :span="24">
            <a-form-item class="mb-15" label="汪星人备注" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-textarea placeholder="请输入" v-decorator="[
                  'dogRemark',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength="300"></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 0]">
          <a-col :span="24">
            <a-form-item class="mb-15" label="猫星人备注" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-textarea placeholder="请输入" v-decorator="[
                  'catRemark',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength="300"></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import {
    foodAdd,
    foodSave
  } from '@/api'
  import {
    cateList
  } from '@/api/index'
  import {
    get
  } from 'lodash'
  export default {
    data() {
      return {
        loading: false,
        isShow: true,
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        },
        details: {},
        showModal: false,
        titles: '新增',
        info: {
          
        },
        menuList:[],
        form: this.$form.createForm(this)
      }
    },
    computed: {
        
    },
    watch: {},
   
    mounted() {
      this.getCate()
    },
    methods: {
      formgetFileLength(type) {
        //获取图片
        return get(this.form.getFieldValue(type), 'length') || 0
      },
      formuploadSuccess(data, type) {
        this.form.setFieldsValue({
          images: [...this.form.getFieldValue(type), data.path]
        })
      },
      changeSelect(e) {
        console.log(e)
      },
      onChange(e) {
        this.form.setFieldsValue({
          scope: e.target.value
        })
      },
      cancel() {
        this.form.resetFields()
        this.showModal = false
      },
      confirmOk() {
        this.form.validateFields((err, values) => {
          if (!err) {
            // this.loading = true
            const {
              info
            } = this

            let data = {

              id: info && info.id ? info.id : undefined,
              ...this.$utils.trimValue(values),
            }
            // console.log('data', values)
            // return
            const fun = info && info.id ? foodSave : foodAdd
            fun(data)
              .then(() => {
                this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
                this.$emit('upload')
                this.cancel()
              })
              .finally(() => {
                this.loading = false
              })

          }
        })
      },
      getData() {
        this.loading = true
        deductionDetail({
            id: 1
          })
          .then(data => {
            this.details = data
          })
          .finally(() => (this.loading = false))
      },
      getCate() {
        this.loading = true
        cateList({pageNo: 1,pageSize: 10,scope:0}).then(data => {
          this.menuList = data.list
        }).finally(() => this.loading = false)
      },
      open(data) {
        this.info = data

        if (data.id) {
          this.titles = '修改'
        } else {
          this.titles = '新增'
        }
        this.showModal = true
        // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
        this.$nextTick(() => {
          this.form.setFieldsValue({
            ...this.info
          })
        })
        // this.$emit('upload')
        // this.$nextTick(() => {
        //     this.form.setFieldsValue({
        // 					...res
        // 				})

        // 			})
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-form-item-label {
    // width: 100px;
  }
</style>